<template>
  <view class="">
    <u-sticky>
      <u-tabs change="change" :activeStyle="{backgroundcolor:'pink',borderradius:'45px' }" :list="list1" @click="click">
      </u-tabs>
    </u-sticky>

    <!--   <u-popup :show="show" mode="center" @close="popClose" @open="popOpen">
      <view>
        <text>人生若只如初见，何事秋风悲画扇</text>
      </view>
    </u-popup> -->
    <view>
      <u-calendar @close="calendarClose" closeOnClickOverlay='true' :show="show" :mode="mode" @confirm="confirm">
      </u-calendar>

    </view>
    <view class="card">


      <u-empty mode="history"
        icon="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew12.photophoto.cn%2F20171122%2Ffennenjiaoyinkatongshuicaitoumingsucai-29206521_1.jpg&refer=http%3A%2F%2Fpicnew12.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668522616&t=8cd8b1f95935ca162ea0762195fd7423">
      </u-empty>

    </view>

    <view class="home">


      <view class="goHome" @click="goHome">

        去商场逛逛
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data () {
    return {
      timelist: [],
      show: false,
      mode: 'range',
      list1: [{
        name: '今日',
      }, {
        name: '昨日',
      }, {
        name: '近7日'
      }, {
        name: '近30日'
      }, {
        name: '自定义时间'
      }]
    }
  },
  methods: {
    goHome () {
      uni.switchTab({
        url: '/pages/home/home'
      })
    },
    confirm (e) {
      console.log(e);
      this.timelist = e
      this.timelist2 = this.timelist
      var star = this.timelist2.shift()
      var end = this.timelist2.pop()



      this.list1[4].name = `${star} ~ ${end}` //'\'$e[0]+\'-\'+$e.[e.length-1]'
    },

    calendarClose () { this.show = false },
    click (item) {
      // console.log('item', item);
      if (item.index == 4) {
        // this.popOpen()
        this.show = true

      }

    },
    change (e) {
      console.log('index', e);

    }
  }
}
</script>

<style lang="scss">
.slectTime {
  border-radius: 45px;
}

.home {
  display: flex;
  justify-content: center;
  text-align: center;
}

.goHome {


  border-radius: 45px;
  line-height: 45px;
  background-color: pink;
  width: 30%;
  height: 45px;
}
</style>
